<template>
  <div>
    <!-- 左 -->
    <el-container>
      <el-scrollbar
        style="overflow-y:hidden;overflow-x:hidden;"
        @mousewheel.native="slide"
        ref="roll"
      >
        <el-aside :width="isCollapse ?'84px':'220px'" style="overflow-y:hidden;overflow-x:hidden;">
          <!-- 绑定宽度就是判断它打开关闭的宽度 -->
          <el-menu
            :default-active="this.$route.path"
            router
            class="el-menu-vertical-demo"
            :unique-opened="true"
            :collapse="isCollapse"
            background-color="#324157"
            text-color="#BFCBD9"
            active-text-color="#20A0FF"
          >
            <template v-for="(item,index) in sidebars">
              <el-menu-item
                :index="item.path"
                @click="paths(item)"
                :key="index"
                v-if="item.sonlist==null"
              >
                <i :class="item.pic"></i>
                <span slot="title">{{$t(item.title)}}</span>
              </el-menu-item>
              <!-- 标题 -->
              <!--:index="(index+1).toString()"转型-->
              <el-submenu :index="(index+1).toString()" :key="item.id" v-if="item.sonlist!=null">
                <template slot="title">
                  <i :class="item.pic"></i>
                  <span slot="title">{{$t(item.title)}}</span>
                </template>
                <!--子标题-->
                <el-menu-item-group v-for="items in item.sonlist" :key="items.title">
                  <el-menu-item :index="items.path" @click="bottoms(items)">{{$t(items.title)}}</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </template>
          </el-menu>
        </el-aside>
      </el-scrollbar>
      <!-- 右 -->
      <el-container>
        <!-- 导航栏 -->
        <el-header style="padding:0px;">
          <div id="navLfet">
            <div class="rotates">
              <!--判断折叠旋转--->
              <i class="el-icon-s-unfold" :class="[isCollapse?'':'rotate']" @click="show"></i>
            </div>
            <!-- 面包屑 -->
            <el-breadcrumb separator-class="el-icon-arrow-right" class="rowblock">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-if="this.$route.matched[0].name">
                {{this.$route.matched[0].name}}
              </el-breadcrumb-item>
              <el-breadcrumb-item
                v-if="this.$route.meta.title&&this.$route.path!=='/Home/Directory'"
              >{{this.$route.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <div id="navRight">
            <div class="homelist">
              <div
                class="iconfont icon-full_screen"
                @click="toggleFullscreen"
                style="width:50px;height:50px"
              ></div>
            </div>
            <span class="el-dropdown-link">
              <ThemePicker></ThemePicker>
            </span>
            <el-dropdown @command="handleCommand" style="width:50px;height:50px">
              <span class="el-dropdown-link">
                 <i class="iconfont icon-zhongyingwen"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="zh">中文</el-dropdown-item>
                <el-dropdown-item command="en">Egnlich</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <div>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="home">首页</el-dropdown-item>
                  <el-dropdown-item @click.native="quit">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown>
            </el-dropdown>
            </div>
            <!-- <img src="iconfont.css" style="width:100px;heigth:100px"> -->
          </div>
        </el-header>
        <!-- 右下 -->
        <Headline :module="module"></Headline>
        <el-scrollbar style="height:90%;">
          <router-view />
        </el-scrollbar>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// api
import screenfull from "screenfull"; //全屏
import ThemePicker from "@/components/ThemePicker"; //主题
import login from "./../api/login.js";
import cookie from "js-cookie";
import Headline from "../components/Headline"; //封装选项卡
export default {
  name: "homelist",
  components: {
    ThemePicker,
    Headline
  },
  data() {
    return {
      module: [],
      isCollapse: true,
      breadlist: "", //面包屑
      sidebars: [
        {
          id: 1,
          pic: "el-icon-s-home",
          title: "message.Home",
          path: "/Home/Directory"
        },
        {
          id: 2,
          index: 1,
          pic: "el-icon-s-data",
          // title: "运营管理",
          title: "message.Operation",
          sonlist: [
            {
              // title: "订单管理",
               title: "message.Category",
              path: "/operation/order"
            },
            {
              // title: "评论管理",
               title: "message.Comments",
              path: "/operation/comments"
            },
            {
              // title: "运费模块管理",
               title: "message.FreightTemplate",
              path: "/operation/freight"
            }
          ]
        },
        {
          id: 3,
          index: 2,
          pic: "el-icon-s-shop",
          title: "商品管理",
          title: "message.Commodity",
          sonlist: [
            {
              // title: "商品列表",
              title: "message.List",
              path: "/commodity/list"
            },
            {
              // title: "商品类目",
              title: "message.GoodsType",
              path: "/commodity/category"
            }
          ]
        },
        {
          id: 4,
          index: 3,
          pic: "el-icon-coin",
          // title: "推广管理",
          title: "message.Generalize",
          sonlist: [
            {
              index: 1,
              // title: "商铺广告",
              title: "message.Advertising",
              path: "/generalize/advertising"
            },
            {
              index: 2,
              // title: "推荐管理",
              title: "message.Recommend",
              path: "/generalize/recommend"
            },
            {
              index: 3,
              // title: "优惠卷管理",
              title: "message.Discount",
              path: "/generalize/discount"
            },
            {
              index: 4,
              // title: "商铺信息",
              title: "message.Message",
              path: "/generalize/message"
            }
          ]
        },
        {
          id: 5,
          index: 4,
          pic: "el-icon-s-tools",
          lang:"zh",
          // title: "系统管理",
           title: "message.System",
          sonlist: [
            {
              // title: "会员管理",
              title: "message.Member",
              path: "/system/member"
            },
            {
              // title: "管理员",
              title: "message.Administration",
              path: "/system/Administration"
            },
            {
              // title: "角色管理",
              title: "message.Role",
              path: "/system/role"
            }
          ]
        }
      ]
    };
  },
  // 全局刷新
  created() {
    let _this = this;
    setTimeout(() => {
      _this.module.push({
        title: _this.$route.meta.title, //标签
        path: _this.$route.fullPath, //路径
        key: _this.module.length //长度
      });
    }, 50);
  },
  methods: {
    // 中英文切换
    handleCommand(val) {
      this.lang = val;
      if (val === "zh") {
        this.$i18n.locale = "zh"
        console.log(111);
      }else{
        this.$i18n.locale = "en"
      }
    },
    //全屏
    toggleFullscreen() {
      if (!screenfull.isEnabled) {
        return false;
      }
      screenfull.request();
    },
    //  点击折叠
    show() {
      this.isCollapse = !this.isCollapse;
    },
    //去重
    bottoms(items) {
      var wipe = this.module.find(i => i == items); //判断去重是否有重复的有就去除掉
      if (!wipe) {
        this.module.push(items);
      }
    },
    // 跳转首页
    paths(item) {
      let bool = true;
      for (let i = 0; i < this.module.length; i++) {
        if (this.module[i].title == item.title) {
          //判断标签是否相同是就为跳出去
          bool = false;
        }
      }
      if (bool) {
        //不是就添加
        this.$router.push(item);
        this.module.push({
          title: "首页",
          path: "/Home/Directory"
        });
      }
    },
    slide(e) {
      e || window.event;
      if (e.wheelDelta > 0) {
        this.$refs.roll.wrap.scrollTop = this.$refs.roll.wrap.scrollTop + 30; //向左滚动
      }
      if (e.wheelDelta < 0) {
        this.$refs.roll.wrap.scrollTop = this.$refs.roll.wrap.scrollTop - 30; //向右滚动
      }
    },
    // 退出登录
    quit() {
      let _this = this;
      login.quit(cookie.get("token")).then(function(res) {
        if (res.data.errmsg == "成功") {
          _this.$router.push("/login"); //退出登录
          cookie.remove("username");
          cookie.remove("password");
          cookie.remove("token");
          _this.$information.success("退出成功");
        } else {
          _this.$information.error("退出失败");
        }
      });
    },
    // 首页
    home() {
      this.$router.push("/Home/Directory");
    }
  }
};
</script>
<style>
.el-header,
.el-footer {
  background-color: #ffffff;
  text-align: center;
  line-height: 60px;
  border-bottom: 1px solid #ccc;
}
.el-breadcrumb__item {
  line-height: 60px;
}
/* 左边导航栏 */
.el-aside {
  transition: all 1s ease 0s;
  background-color: #324157;
  color: #ccc;
  width: 100vw;
  height: 100vh;
}

.rotate {
  transform: rotate(-180deg);
  transition-duration: 1s;
}
.rotates {
  width: 50px;
  height: 50px;
}
.el-menu {
  border: 0px !important;
}
.el-scrollbar {
  overflow: hidden !important;
}
.el-header {
  padding: 0px;
  display: flex;
}
.el-scrollbar/deep/.el-scrollbar__thumb {
  overflow: auto;
  width: 0 !important;
  overflow-y: hidden !important;
  overflow-x: hidden;
}
.el-scrollbar/deep/.el-scrollbar__wrap {
  overflow-y: auto !important;
}
/* 导航栏 */
.el-header {
  display: flex;
  justify-content: space-between;
}
#navLfet {
  width: 60%;
  display: flex;
}
#navRight {
  width: 300px;
  height: auto;
  display: flex;
}
.el-color-picker__trigger{
  width: 16px;
  height: 16px;
}
</style>